<script role="text/ecmascript-6">
  /**
   * Created by wcz on 2017/1/8.
   */
  import address from './address'

	export default {
		data () {
			let validatePhone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入手机号'));
				} else {
					if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(this.registerForm.phone)) {
						callback(new Error('请输入正确11位手机号'));
					}
					callback();
				}
            }
			return {
				rules: {
					role: [
						{required: true, message: '请选择', trigger: 'blur'}
					],
					name: [
						{required: true, message: '请输入姓名', trigger: 'blur'}
					],
					phone: [
						{validator: validatePhone, trigger: 'blur'}
					],
					company: [
						{required: true, message: '请输入公司', trigger: 'blur'}
					]
				},
				registerForm: {
					role: '0',
					name: '',
					phone: '',
					province: '',
                    city: '',
					company: ''
				},
			}
		},
		computed: {
			provinces () {
				let province = [];
				for (let i in address) {
					if (address.hasOwnProperty(i)) {
						province.push(i)
					}
				}
				return province;
			},
			citys () {
				return address[this.registerForm.province]
            }
		},
		mounted () {

    },
    methods: {
      summit () {
        this.$refs.register.validate(valid => {
          if (valid) {
            let postData = new FormData();
            postData.append('name', this.registerForm.name);
            postData.append('role', this.registerForm.role);
            postData.append('phone', this.registerForm.phone);
            postData.append('company', this.registerForm.company);
            postData.append('province', this.registerForm.province);
            postData.append('city', this.registerForm.city);
            postData.append('password', '123456');
            if (this.registerForm.role == '0') {
              postData.append('is_captain', true);
            }

            this.jax('/downstreams', postData, {loading: 'xhrPending', err: '创建账号失败'})
              .then(res => {
                if (res.success) {
                  this.msg('创建成功！', 'success');
                  this.registerForm = {
                    role: '0',
                    name: '',
                    phone: '',
                    province: '',
                    city: '',
                    company: ''
                  }
                }
              })
          }
        });
      },
      resetForm () {

      }
    },
  };
</script>

<template>
  <div class="register">
    <div class="register__content" v-loading.body="xhrPending" layout="column center-center">

      <el-form class="register__form" label-position="left" ref="register" :model="registerForm" :rules="rules"
               label-width="100px">
        <el-form-item>
          <h1 class="form__title"><i class="iconfont iconfont--lg vm">&#xe631;</i> <span class="vm">账号发放</span></h1>
        </el-form-item>
        <el-form-item label="账号类型" prop="role">
          <el-select class="full" v-model="registerForm.role" placeholder="账号类型">
            <el-option label="省队长-A" value="0"></el-option>
            <el-option label="合作方捕头-B" value="1"></el-option>
            <el-option label="合作方线人-C" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作地点" required>
          <el-col :span="11">
            <el-select filterable v-model="registerForm.province" placeholder="请选择省">
              <el-option v-for="province in provinces" :label="province" :value="province"></el-option>
            </el-select>
          </el-col>
          <el-col class="tac" :span="2">-</el-col>
          <el-col :span="11">
            <el-select filterable v-model="registerForm.city" placeholder="请选择市">
              <el-option v-for="city in citys" :label="city" :value="city"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="合作公司" prop="name" v-if="registerForm.role == '2'">
          <el-input v-model="registerForm.name" placeholder="请填写合作公司"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" v-else>
          <el-input v-model="registerForm.name" placeholder="请填写姓名"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company" v-if="registerForm.role == '1'">
          <el-input v-model="registerForm.company" placeholder="请填写公司"></el-input>
        </el-form-item>
        <el-form-item label="账户" required>
          <el-input v-model="registerForm.phone" placeholder="请填写手机号或其他"></el-input>
        </el-form-item>

        <el-form-item></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="summit">创建账号</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>